<script lang="ts">
import { ref, watch } from 'vue';
import 'swiper/css/pagination';
import { Swiper, SwiperSlide } from 'swiper/vue';
import { Pagination } from 'swiper';
import router from '@/router';
import { getSearchYLike, getSearchBanner, getSearchHot, getSearchPointer } from "../api/Search";
export default {
    components: {
        Swiper,
        SwiperSlide,
    },
    setup() {
        const keyword: any = ref(null);
        const active = ref(0);
        //猜你喜欢
        let SearchYLikeData: any = ref(null)
        async function GetSearchYLikeFun() {
            let data = await getSearchYLike()
            SearchYLikeData.value = data.data
        }
        GetSearchYLikeFun()

        //轮播图
        let SearchBannerData: any = ref(null)
        async function GetSearchBannerFun() {
            let data = await getSearchBanner()
            SearchBannerData.value = data.data.list
        }
        GetSearchBannerFun()

        //热搜
        let SearchHotData: any = ref(null)
        async function GetSearchHotFun() {
            let data = await getSearchHot()
            SearchHotData.value = data.data.filter((item: any) => item.items.length > 0)
        }
        GetSearchHotFun()
        let SearchPointe: any = ref(null)
        async function GetSearchPointerFun() {
            let data = await getSearchPointer({
                keyword: keyword.value
            })
            SearchPointe.value = data.data.sug_list
        }

        const onSearch = () => {
            if (keyword.value.trim() != '') {
                clickItem(keyword.value)
            }
        }

        const clickItem = (keyword: string) => {
            if (keyword.trim() != '') {
                let tmpSearchHistory = JSON.parse(localStorage.getItem('SearchHistory'))
                if (!tmpSearchHistory.some((item: any) => item.keyword == keyword)) {
                    tmpSearchHistory.push({
                        keyword
                    })
                }
                // console.log(tmpSearchHistory);

                localStorage.setItem('SearchHistory', JSON.stringify(tmpSearchHistory))
                router.push({ path: '/SearchResPreView', query: { keyword: keyword } })
            }
        }

        const clean = () => {
            SearchHistoryData.value = []
            localStorage.setItem('SearchHistory', JSON.stringify(SearchHistoryData.value))
        }

        watch(keyword, () => {
            if (keyword.value.trim() != '') {
                GetSearchPointerFun()
            } else {
                SearchPointe.value = null
            }
        });

        let SearchHistoryData = ref(JSON.parse(localStorage.getItem('SearchHistory')))
        return {
            active,
            keyword,
            SearchPointe,
            SearchHotData,
            SearchYLikeData,
            SearchBannerData,
            SearchHistoryData,
            clean,
            onSearch,
            clickItem,

            Advertisement: [Pagination],
        };
    },
}
</script>

<template>
    <div class="Search">
        <van-sticky>
            <div class="Search-Header">
                <!-- 搜索框 -->

                <van-search v-model="keyword" shape="round" show-action placeholder="请输入搜索关键词" @search="onSearch">
                    <template #left>
                        <van-icon name="arrow-left" @click="$router.back()" />
                    </template>
                    <template #action>

                        <div @click="clickItem(keyword)">搜索</div>
                    </template>
                </van-search>

            </div>
        </van-sticky>

        <div class="Search-Body" v-show="!keyword">
            <!-- 搜索历史 -->
            <div class="Search-history" v-if="SearchHistoryData.length > 0">
                <div class="history-UpperPortion">
                    <h3>搜索历史</h3>
                    <van-icon name="delete-o" @click="clean" />
                </div>
                <div class="history-LowerPart">
                    <div class="historicRecords" v-for="(item, index) in SearchHistoryData" :key="index"
                        @click="clickItem(item.keyword)">
                        {{ item.keyword }}
                    </div>
                    <!-- 显示 -->
                    <!-- <van-icon name="arrow-down" /> -->
                </div>
            </div>
            <!-- 猜你喜欢 -->
            <div class="Search-AssumeYLike" v-if="SearchYLikeData">
                <div class="AssumeYLike-UpperPortion">
                    <h3>{{ SearchYLikeData.title }}</h3>
                </div>
                <ul class="AssumeYLike-LowerPart">
                    <li v-for="item in SearchYLikeData.text_list" :key="item.word_id" @click="clickItem(item.keyword)">{{
                        item.keyword }}</li>
                </ul>
            </div>
            <!-- 搜索页广告轮播 -->
            <swiper :pagination="true" :modules="Advertisement" observer slidesPerView='auto' loop
                class="Search-Advertisement" v-if="SearchBannerData">
                <swiper-slide v-for="item in SearchBannerData" :key="item.id">
                    <div class="AdvertisementImgBox">
                        <img :src="item.image">
                    </div>
                </swiper-slide>
            </swiper>
            <!-- 热搜 -->
            <swiper :slidesPerView="'auto'" :spaceBetween="15" class="Search-Hot">
                <swiper-slide v-for="(items, index) in SearchHotData" :key="index">
                    <div class="ReList-tltle">
                        <h3>{{ items.title }}</h3>
                    </div>
                    <ul>
                        <li v-for="item in items.items" :key="item.word_id || item.tid">
                            <!-- 排名 -->
                            <div></div>
                            <h3 class="ReList-con one-txt-cut" @click="clickItem(item.keyword || item.title)">{{
                                item.keyword || item.title }}</h3>
                        </li>
                    </ul>
                    <!-- <div class="more">
                        <span>更多</span>
                        <van-icon name="arrow" />
                    </div> -->
                </swiper-slide>
            </swiper>
        </div>
        <div class="Search-Body" v-show="keyword">
            <ul class="Search-pointer">
                <li v-for="item in SearchPointe" :key="item.word_id">
                    <div class="pointer-DesignerItem" v-if="item.business_user">
                        <div class="DesignerItem-Icon">
                            <img
                                :src="item.icon_url">
                        </div>
                        <div class="Designer-Com">
                            <h3>{{ item.business_user.user_info.name }}</h3>
                            <div class="Designer-info" >
                                <span v-for="(tags,index) in item.business_user.search_tag_info.tags" :key="index">{{ tags }}</span>
                            </div>
                        </div>
                        <div class="Designer-location" v-if="item.business_user.location">
                            <span>{{ item.business_user.location }}</span>
                        </div>
                    </div>
                    <div class="pointer-item" v-if="!item.business_user" @click="clickItem(item.keyword)">
                        <i class="iconfont icon-sousuo"></i>
                        <span>{{ item.keyword }}</span>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>
<style lang="scss" scoped>
.Search {
    min-height: 100vh;

    .Search-Header {
        padding: 0 8px;

        :deep(.van-search) {
            padding: 12px 0 0 0;
            height: 45px;

            .van-icon {
                margin-right: 8px;
                font-size: 20px;
                color: #000;
            }

            .van-search__content {
                border: 1px solid #36b3b5;
                box-sizing: border-box;
                height: 30px;
                padding-top: 4px;
                padding-bottom: 4px;

                .van-search__field {
                    height: 100%;
                }

                i {
                    margin: 0;
                    padding: 0;
                    color: #999;
                }
            }

            .van-search__action {
                margin-left: 8px;
                background-color: #36b3b5;
                color: #fff;
                width: 38px;
                text-align: center;
                border-radius: 32px;
                font-size: 12px;
                height: 26px;
                line-height: 26px;
            }
        }
    }

    .Search-Body {
        padding-bottom: 20px;

        >div {
            &:nth-child(1) {
                margin-top: 12px;
            }
        }

        .Search-history {

            padding: 0 8px;

            .history-UpperPortion {
                display: flex;
                justify-content: space-between;

                h3 {
                    font-size: 14px;
                    font-weight: bold;
                }

                i {
                    font-size: 16px;
                }
            }

            .history-LowerPart {
                display: flex;
                flex-wrap: wrap;
                // margin: 6px 0;

                .historicRecords {
                    padding: 4px 10px;
                    font-size: 12px;
                    background-color: #f5f5f5;
                    border-radius: 14px;
                    text-align: center;
                    // margin-left: 10px;
                    margin: 2px 0 2px 10px;
                }

                i {
                    font-size: 18px;
                    padding: 4px;
                    border-radius: 50%;
                    background-color: #f5f5f5;
                    margin-left: 10px;
                }
            }
        }

        .Search-AssumeYLike {
            padding: 0 8px;

            .AssumeYLike-UpperPortion {
                h3 {
                    font-weight: bold;
                    font-size: 14px;
                }
            }

            .AssumeYLike-LowerPart {
                display: flex;
                flex-wrap: wrap;

                li {
                    width: 50%;
                    display: flex;
                    font-size: 13px;
                    align-items: center;
                    margin: 4px 0;
                }
            }
        }

        .Search-Advertisement::v-deep {
            overflow: hidden;
            border-radius: 12px;
            margin: 6px 8px;
            height: 80px;
            .swiper-pagination {
                bottom: 0;
            }
        }

        :deep(.Search-Hot) {
            padding: 0 8px;

            .swiper-slide {
                width: 250px;
                padding: 10px 16px;
                box-sizing: border-box;
                background-image: linear-gradient(0deg, #fff 80%, #fed4ce);
                border-radius: 8px;
                box-shadow: 0px 0px 1px 0px rgb(0 0 0 / 10%);
                margin: 2px 0;

                .ReList-tltle {
                    h3 {
                        height: 45px;
                        line-height: 45px;
                        font-size: 16px;
                        font-weight: bold;
                    }
                }

                ul {
                    li {
                        padding: 6px 0;

                        h3 {
                            font-size: 14px;
                        }
                    }
                }

                // .more {
                //     text-align: center;
                //     font-size: 12px;
                //     margin-top: 10px;
                // }
            }
        }

        .Search-pointer {
            padding: 8px 8px 0;

            li {

                .pointer-DesignerItem,
                .pointer-item {
                    display: flex;
                    height: 54px;
                    box-sizing: border-box;
                    border-bottom: 2px solid #f5f5f5;
                }

                .pointer-DesignerItem {

                    padding: 10px 0;

                    .DesignerItem-Icon {
                        width: 18px;
                        height: 18px;
                        margin: 0 5px;

                        img {
                            object-fit: cover;
                        }
                    }

                    .Designer-Com {
                        flex: 1;

                        h3 {
                            font-size: 14px;
                            font-weight: bold;
                        }

                        .Designer-info {
                            font-size: 12px;
                            color: #999;

                            span {
                                margin-left: 4px;

                                &:nth-child(1) {
                                    margin-left: 0;
                                }
                            }
                        }
                    }

                    .Designer-location {
                        display: flex;
                        align-items: center;
                        font-size: 12px;
                        color: #999;
                    }
                }

                .pointer-item {
                    align-items: center;

                    i {
                        margin: 0 5px;
                        font-size: 20px;
                    }

                    span {
                        font-size: 13px;
                        font-weight: bold;
                        // line-height: 54px;
                    }
                }
            }
        }
    }
}</style>